<template>
  <div class="container" ref="mainCon">
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="决定书文号" class="row-padding-bottom">
              <el-input
                v-model="filterField.decisionNum"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="处理机关" class="row-padding-bottom">
              <el-input
                v-model="filterField.handlingAuthority"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="处罚日期" class="row-padding-bottom">
                <el-date-picker
                  type="date"
                  placeholder="请选择处罚日期"
                  v-model="filterField.punishmentDate"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icondaochu"
              @click="getExportList"
            >
              <span class="opetareText">导出</span>
            </el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div class="proDetailsListBox">
        <el-table
          :data="tableList"
          v-loading="loading"
          :max-height="tableHeight"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="companyName"
            label="处罚来源"
            min-width="100"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="uscc"
            label="决定书文号"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="处罚日期"
            min-width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="处罚机关"
            min-width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="boss"
            label="处罚种类"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bossTel"
            label="处罚事由"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="bossTel"
            label="处罚内容"
            min-width="120"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'administrativePunishment',
  data() {
    return {
      tableHeight: null,
      advanced: false,
      areaId: [],
      filterField: {
        decisionNum: '',
        handlingAuthority: '',
        punishmentDate: '',
      },
      requestUrl: '/api-c/complaint/base/listbyall',
      pageSize: 20,
      pageNo: 1,
      tableList: [],
    }
  },
  mounted() {
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 324
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 324
      }
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: this.requestUrl,
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    async getExportList() {
      const flag = await this.getExports()
      let {
        areaId,
        serverArea,
        complainant,
        complainantPhone,
        complainantTimeStart,
        complainantTimeEnd,
        status,
      } = this.filterField
      if (flag) {
        window.location.href =
          common.commonApi +
          'api-c/complaint/base/exportList?areaId=' +
          areaId +
          '&serverArea=' +
          serverArea +
          '&complainant=' +
          complainant +
          '&complainantPhone=' +
          complainantPhone +
          '&complainantTimeStart=' +
          complainantTimeStart +
          '&complainantTimeEnd=' +
          complainantTimeEnd +
          '&status=' +
          status +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    toDetail(row) {
      this.$router.push({
        path: '/home/enterpriseArchives/punishmentDetail',
        query: {
          id: row.id,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseArchives/enterpriseList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.proDetailsListBox {
  padding: 24px;
  background: #fff;
}
@import '../../../static/css/filterArea.less';
</style>
